<template>
	<fui-nav-bar title="商品详情" @leftClick="leftClick">
		<fui-icon name="arrowleft"></fui-icon>
	</fui-nav-bar>
	<fui-swiper-dot type="null" :items="items" :current="current" class="swiper">
		<swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay :interval="4000" :duration="150">
			<swiper-item v-for="(item, index) in items" :key="index">
				<view class="fui-banner__item">
					<image :src="item.src" mode="" style="width: 100%; height: 100%"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="index">{{ current + 1 }}/{{ items.length }}</view>
	</fui-swiper-dot>
	<!-- 	<fui-list-cell class="titleBox" :padding="['10rpx','20rpx','10rpx','20rpx']">
		<text>￥{{equipDetails.price}}</text>
		<view>{{equipDetails.name}}</view>
		<view>1111</view>
	</fui-list-cell> -->
	<fui-card full lineColor class="card">
		<view class="fui-card__content fui-padding data">
			<!-- <text class="price">￥{{ equipDetails.price }}</text> -->
			<!-- <text class="sales">已售{{ equipDetails.sales > 100 ? '100+' : equipDetails.sales }}</text> -->
			<!-- <text class="sales">已售100</text> -->
		</view>
		<!-- <view class="fui-card__content fui-padding">{{ equipDetails.name }}</view> -->
	</fui-card>
	<fui-list-cell>
		<view class="fui-align__center shopInfo">
			<image class="fui-list__icon" :src="src" style="width: 80rpx; height: 80rpx; margin-right: 30rpx"></image>
			<view>
				<view>标题文字</view>
				<view style="font-size: 14px; color: gray">描述文字</view>
			</view>
		</view>
	</fui-list-cell>
	<fui-list-cell>相关商品</fui-list-cell>
	<view class="correlationCard">
		<view class="fui-card__content fui-padding shopCard" v-for="(item, index) in 4">
			<image src="/static/correlation.jpg" mode=""></image>
			<text>Riley莱利英式小头斯诺克分体球杆台球杆黑8桌球杆手工通杆一体</text>
		</view>
	</view>
	<fui-list-cell>商品详情</fui-list-cell>
	<fui-form>
		<fui-input v-for="(item, index) in shopForm" :key="index" :label="item.label" borderTop :placeholder="item.value" readonly></fui-input>
	</fui-form>
	<image v-for="(item, index) in shopInfo" :key="index" :src="item" mode="" class="shopDetail_img"></image>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';
import { useCounterStore, useFunctionStore } from '@/store/equipment/index.js';
const items = [
	{
		src: '/static/shop1.jpg'
	},
	{
		src: '/static/shop2.jpg'
	},
	{
		src: '/static/shop3.jpg'
	}
];
const shopForm = [
	{
		label: '品牌',
		value: 'Riley'
	},
	{
		label: '材质',
		value: '白蜡木'
	},
	{
		label: '台球打法',
		value: '英式台球'
	},
	{
		label: '球杆分类',
		value: '斯诺克球杆'
	},
	{
		label: '上市时间',
		value: '2017年秋季'
	}
];
const shopInfo = [
	'https://img.alicdn.com/imgextra/i2/667383687/O1CN01QMdi031d6h6DhYo1n_!!667383687.jpg',
	'https://img.alicdn.com/imgextra/i2/667383687/O1CN01n3MDFe1d6h6K8Yqee_!!667383687.jpg',
	'https://img.alicdn.com/imgextra/i4/667383687/O1CN01THFh6c1d6h6JRrjoq_!!667383687.png'
];
export default defineComponent({
	setup() {
		const state = reactive({
			items,
			current: 0,
			src: '/static/logo.png',
			equipDetails,
			shopForm,
			shopInfo,
			tableData: [
				{
					name: 'FirstUI 1',
					province: '上海',
					city: '普陀区'
				},
				{
					name: 'FirstUI 2',
					province: '上海',
					city: '普陀区'
				},
				{
					name: 'FirstUI 3',
					province: '上海',
					city: '普陀区'
				},
				{
					name: 'FirstUI 4',
					province: '上海',
					city: '普陀区'
				}
			],
			//基础使用 表头
			headerData: [
				{
					prop: 'name',
					label: '名称'
				},
				{
					prop: 'province',
					label: '省份'
				},
				{
					prop: 'city',
					label: '城市'
				}
			]
		});
		const store = useCounterStore();
		const functionStore = useFunctionStore();
		const equipDetails = store.equipDetails;
		state.equipDetails = equipDetails;
		console.log('equipDetails', equipDetails);
		console.log('store', store.equipDetails);
		const leftClick = () => {
			functionStore.navigateBack();
		};
		const change = (e) => {
			state.current = e.detail.current;
		};
		return {
			...toRefs(state),
			leftClick,
			change
		};
	}
});
</script>

<style scoped lang="scss">
.fui-banner__item {
	width: 100%;
	height: 600rpx;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34rpx;
	font-weight: 600;
}

.fui-banner__wrap {
	height: 600rpx;
}
.swiper {
	position: relative;
	.index {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		background-color: rgba(0, 0, 0, 0.3);
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
	}
}
.titleBox {
	font-size: 24rpx;
	font-weight: 600;
}
.card {
	view:nth-child(1) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		.price {
			font-size: 40rpx;
			font-weight: bold;
			color: red;
		}
		.sales {
			font-size: 24rpx;
			color: #999999;
		}
	}
	view:nth-child(2) {
		font-size: 28rpx;
		font-weight: bold;
		padding: 0rpx 20rpx;
	}
}
.shopInfo {
	display: flex;
	align-items: center;
}
.correlationCard {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.shopCard {
		width: 48%;
		height: 400rpx;
		background-color: #f7f7f7;
		margin-top: 10rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		image {
			width: 100%;
			height: 300rpx;
		}
		text {
			font-size: 28rpx;
			font-weight: bold;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}
}
.shopDetail_img {
	width: 100%;
	height: 1000rpx;
}
</style>
